<template>
  <div class="TE">
    <div id="TE_body"></div>
    <!-- <div>当前第{{ getCurrentBoardIndex }}页;</div>
    <div>
      <button @click="clear">擦除当前白板涂鸦</button>
      <button @click="reset">点击重置白板</button>
      <button @click="setDrawEnable(true)">允许涂鸦</button>
      <button @click="setDrawEnable(false)">不允许涂鸦</button>
      <button @click="getBoardList">获取所有白板列表</button>
    </div>
    <div>
      <button @click="deleteBoard">删除白板</button>
      <button @click="getBoardRatio">获取当前白板宽高比</button>
      <button @click="setBoardRatio('1:1')">设置宽高比1:1</button>
      <button @click="setBoardRatio('16:9')">设置宽高比16:9</button>
      <button @click="getBoardScale">获取当前白板缩放比例</button>
      <button @click="isDrawEnable()">获取白板是否允许涂鸦</button>
    </div> -->
    <!-- 工具 -->
    <div class="tool">
      <el-button-group>
        <el-button @click="clear" icon="el-icon-refresh" size="mini" round></el-button>
        <el-button icon="el-icon-edit" size="mini" round></el-button>
      </el-button-group>
    </div>
    <!--未开始时 倒计时 -->
    <div v-if="roomInfo.status == ROOM_STATUS.not_started" class="timer">倒计时：{{ "00" }}时{{ "01" }}分{{ "30" }}秒</div>
    <swiper @tabteduBoard="tabteduBoard" :TDListInfo="TDListInfo" @prevBoard="prevBoard" @nextBoard="nextBoard" :currentIndex="getCurrentBoardIndex"></swiper>
  </div>
</template>

<script>
import { ROOM_STATUS } from "../../../util/constants";
import swiper from "./swiper";
import { mapGetters } from "vuex";

const sdkAppId = 1400495479;
export default {
  data() {
    return {
      ROOM_STATUS,
      teduBoard: null,
      KZsrc: "",
      TDListInfo: [
        {
          bgImg:
            "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg",
          id: null,
        },
        {
          bgImg:
            "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00154-2169.jpg",
          id: null,
        },
        {
          bgImg:
            "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00436-4090.jpg",
          id: null,
        },
        {
          bgImg:
            "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00436-4091.jpg",
          id: null,
        },
        {
          bgImg:
            "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00436-4092.jpg",
          id: null,
        },
        {
          bgImg:
            "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00436-4093.jpg",
          id: null,
        },
      ],
    };
  },
  components: {
    swiper,
  },
  computed: {
    // 获取当前白板是第几页
    getCurrentBoardIndex() {
      let id = this.getCurrentBoard();
      if (!id) return;
      let index = this.TDListInfo.findIndex((item) => {
        return item.id == id;
      });
      if (index) {
        return index + 1;
      } else {
        return 0 + 1;
      }
    },
    ...mapGetters(["TEFn", "userInfo", "roomInfo"]),
    userId() {
      return this.$store.state.userInfo.userId;
    },
    userSig() {
      return this.$store.state.userInfo.userSig;
    },
    roomId() {
      return this.$store.state.roomInfo.trtcRoomId;
    },
    groupID() {
      return this.$store.state.roomInfo.trtcRoomId;
    },
  },
  watch: {
    TEFn() {
      // 如果当前方法存在
      if (this[this.TEFn.name]) {
        this[this.TEFn.name](this.TEFn.data);
      }
    },
  },
  mounted() {
    this.onkeyupUndo();
  },
  destroyed() {
    document.onkeyup = null;
  },
  methods: {
    // 传输白板消息
    addSyncData(data) {
      if (!this.teduBoard) return;
      this.teduBoard.addSyncData(JSON.parse(data));
    },
    // 监听ctrl+z按键 撤销
    onkeyupUndo() {
      document.onkeyup = (e) => {
        if (e.ctrlKey == true && e.keyCode == 90) {
          this.undo();
        }
      };
    },
    initTE() {
      console.log('开启白板中...')
      var initParams = {
        id: "TE_body", // dom节点id
        classId: this.roomId, // 课堂 ID，32位整型，取值范围[1, 4294967294]
        sdkAppId: sdkAppId, // 整数
        userId: this.userId, // 字符串
        userSig: this.userSig, // 字符串
      };
      var teduBoard = new TEduBoard(initParams);
      this.teduBoard = teduBoard;
      teduBoard.on(TEduBoard.EVENT.TEB_ERROR, (code, msg) => {
        console.log("白板错误事件", code, msg);
      });
      teduBoard.on(TEduBoard.EVENT.TEB_WARNING, (code, msg) => {
        console.log("白板警告事件", code, msg);
      });
      teduBoard.on(TEduBoard.EVENT.TEB_SYNCDATA, (data) => {
        console.log(data);
        this.$store.dispatch("setIMFn", {
          name: "TECreateCustomMessage",
          data: {
            groupID: this.groupID,
            data: data,
          },
        });
      });
      console.log('开启白板成功...')
      setTimeout(() => {

        this.synchronizationTE();
      }, 1000)
    },
    // 将房间内的所有白板列表信息同步到页面中
    synchronizationTE() {
      let arr = this.getBoardList();
      console.log("当前白板列表");
      console.log(arr);
      for (let i in arr) {
        if (i > 0) {
          if (!this.TDListInfo[i - 1]) return;
          this.TDListInfo[i - 1].id = arr[i];
        }
      }
    },
    // 重置白板,会删除所有白板
    reset() {
      this.teduBoard.reset();
    },
    // 清空当前白板涂鸦
    clear() {
      this.teduBoard.clear();
    },
    // 销毁白板
    destroyTE() {
      console.log('关闭白板')
      if (!this.teduBoard) return;
      this.teduBoard.destroy();
    },
    // 撤销上一步
    undo() {
      this.teduBoard.undo();
    },
    // 增加白板
    addBoard(index) {
      if (!this.TDListInfo[index]) return;
      let res = this.teduBoard.addBoard(this.TDListInfo[index].bgImg);
      this.TDListInfo[index].id = res;
      // console.log("当前白板列表:", this.getBoardList());
    },
    // 删除白板
    deleteBoard() {
      let res = this.teduBoard.deleteBoard(
        "web_user_5823141_1616468242_1_#DEFAULT"
      );
      console.log(res);
    },
    // 切换白板,跳转至指定白板页
    gotoBoard(id) {
      if (!id) return;
      this.teduBoard.gotoBoard(id);
      // html2canvas(document.querySelector("#TE_body")).then((canvas) => {
      //   var imgUrl = canvas.toDataURL("image/jpeg", 0.5);
      //   this.KZsrc = imgUrl;
      // });
    },
    // 获取所有的白板列表
    getBoardList() {
      console.log(this.teduBoard.getBoardList());
      return this.teduBoard.getBoardList();
    },
    // 向上翻页,切换到上一个白板
    prevBoard() {
      if (this.getCurrentBoardIndex == 1) return;
      this.teduBoard.prevBoard();
    },
    // 向下翻页,切换到下一个白板
    nextBoard() {
      this.teduBoard.nextBoard();
    },
    // 获取当前白板id
    getCurrentBoard() {
      if (!this.teduBoard) {
        return null;
      } else {
        return this.teduBoard.getCurrentBoard();
      }
    },
    // 设置当前白板的背景图片
    setBackgroundImage(imgUrl) {
      let res = this.teduBoard.setBackgroundImage(imgUrl);
    },
    // 获取当前白板的宽高比
    getBoardRatio() {
      let res = this.teduBoard.getBoardRatio();
      console.log(res);
    },
    // 设置当前白板宽高比
    setBoardRatio(str) {
      this.teduBoard.setBoardRatio(str);
    },
    // 获取当前白板的缩放比例
    getBoardScale() {
      let res = this.teduBoard.getBoardScale();
      console.log(res);
    },
    // 获取白板是否可以涂鸦
    isDrawEnable() {
      let res = this.teduBoard.isDrawEnable();
      console.log(res);
    },
    // 设置白板是否可以涂鸦
    setDrawEnable(booble) {
      this.teduBoard.setDrawEnable(booble);
    },
    // 切换或者增加白板
    tabteduBoard(item, index) {
      // 白板id存在,执行切换
      if (item.id) {
        this.gotoBoard(item.id);
      } else {
        // 不存在,执行创建
        this.addBoard(index);
      }
    },
  },
};
</script>

<style  scoped lang="scss">
.TE {
  position: relative;
  #TE_body {
    background: #ffffff;
    width: 100%;
    height: 68vh;
  }
  .tool {
    position: absolute;
    right: 20px;
    bottom: 20vh;
    z-index: 100;
  }
  .timer {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 100;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    color: #ffffff;
    padding: 0 41px;
    font-size: 16px;
  }
}
</style>
